import React, { useState } from 'react';
import { 
  IonPage, 
  IonContent, 
  IonHeader, 
  IonToolbar, 
  IonButtons, 
  IonMenuButton, 
  IonTitle,
  IonList,
  IonItem,
  IonLabel,
  IonToggle,
  IonSelect,
  IonSelectOption,
  IonButton,
  IonIcon,
  IonInput,
  IonNote,
  IonAvatar,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardContent,
  IonGrid,
  IonRow,
  IonCol,
  IonText,
  IonTextarea
} from '@ionic/react';
import { 
  moon, 
  sunny, 
  notifications, 
  mail, 
  lockClosed, 
  person, 
  language, 
  logOut,
  arrowBack,
  save,
  trash
} from 'ionicons/icons';
import { useHistory } from 'react-router-dom';

const SettingsPage: React.FC = () => {
  const history = useHistory();
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
  const [emailNotifications, setEmailNotifications] = useState(true);
  const [languagePreference, setLanguagePreference] = useState('zh-CN');
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [userName, setUserName] = useState('张三');
  const [userEmail, setUserEmail] = useState('zhangsan@example.com');
  const [bio, setBio] = useState('前端开发工程师，热爱新技术和用户体验设计。');

  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
    document.body.classList.toggle('dark', !isDarkMode);
  };

  const handleSaveProfile = () => {
    // 这里添加保存个人资料的逻辑
    console.log('保存个人资料', { userName, userEmail, bio });
    // 显示保存成功的提示
    // 在实际应用中，这里会调用API更新用户信息
  };

  const handleChangePassword = () => {
    // 这里添加更改密码的逻辑
    console.log('更改密码', { currentPassword, newPassword, confirmPassword });
    // 在实际应用中，这里会调用API更新密码
  };

  const handleLogout = () => {
    // 这里添加退出登录的逻辑
    console.log('用户退出登录');
    history.push('/login');
  };

  const handleDeleteAccount = () => {
    // 这里添加删除账户的逻辑
    console.log('删除账户');
    // 在实际应用中，这里会调用API删除账户
    history.push('/login');
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>设置</IonTitle>
        </IonToolbar>
      </IonHeader>
      
      <IonContent className="ion-padding">
        {/* 个人资料部分 */}
        <IonCard className="profile-card">
          <IonCardHeader>
            <IonCardTitle>个人资料</IonCardTitle>
          </IonCardHeader>
          
          <IonCardContent>
            <div className="profile-header">
              <IonAvatar className="profile-avatar">
                <img 
                  src="https://i.pravatar.cc/150?img=12" 
                  alt="用户头像" 
                />
              </IonAvatar>
              <div className="profile-info">
                <IonText className="profile-name">{userName}</IonText>
                <IonText className="profile-email">{userEmail}</IonText>
              </div>
            </div>
            
            <IonList lines="none" className="profile-form">
              <IonItem>
                <IonLabel position="stacked">用户名</IonLabel>
                <IonInput 
                  value={userName} 
                  onIonChange={e => setUserName(e.detail.value!)} 
                  placeholder="输入用户名"
                />
              </IonItem>
              
              <IonItem>
                <IonLabel position="stacked">电子邮箱</IonLabel>
                <IonInput 
                  type="email" 
                  value={userEmail} 
                  onIonChange={e => setUserEmail(e.detail.value!)} 
                  placeholder="输入电子邮箱"
                />
              </IonItem>
              
              <IonItem>
                <IonLabel position="stacked">个人简介</IonLabel>
                <IonTextarea 
                  value={bio} 
                  onIonChange={e => setBio(e.detail.value!)} 
                  placeholder="介绍一下你自己..."
                  rows={3}
                />
              </IonItem>
            </IonList>
            
            <IonButton 
              expand="block" 
              color="primary"
              onClick={handleSaveProfile}
            >
              <IonIcon slot="start" icon={save} />
              保存更改
            </IonButton>
          </IonCardContent>
        </IonCard>
        
        {/* 账户设置部分 */}
        <IonCard>
          <IonCardHeader>
            <IonCardTitle>账户设置</IonCardTitle>
          </IonCardHeader>
          
          <IonCardContent>
            <IonList lines="full">
              <IonItem>
                <IonIcon slot="start" icon={lockClosed} color="primary" />
                <IonLabel>更改密码</IonLabel>
                <IonButton 
                  fill="clear" 
                  slot="end"
                  id="open-password-modal"
                >
                  更改
                </IonButton>
              </IonItem>
              
              <IonItem>
                <IonIcon slot="start" icon={language} color="primary" />
                <IonLabel>语言偏好</IonLabel>
                <IonSelect 
                  value={languagePreference} 
                  onIonChange={e => setLanguagePreference(e.detail.value)}
                  interface="popover"
                >
                  <IonSelectOption value="zh-CN">简体中文</IonSelectOption>
                  <IonSelectOption value="en-US">English</IonSelectOption>
                  <IonSelectOption value="ja-JP">日本語</IonSelectOption>
                  <IonSelectOption value="ko-KR">한국어</IonSelectOption>
                </IonSelect>
              </IonItem>
            </IonList>
          </IonCardContent>
        </IonCard>
        
        {/* 通知设置部分 */}
        <IonCard>
          <IonCardHeader>
            <IonCardTitle>通知设置</IonCardTitle>
          </IonCardHeader>
          
          <IonCardContent>
            <IonList lines="full">
              <IonItem>
                <IonIcon slot="start" icon={notifications} color="primary" />
                <IonLabel>启用通知</IonLabel>
                <IonToggle 
                  slot="end" 
                  checked={notificationsEnabled} 
                  onIonChange={e => setNotificationsEnabled(e.detail.checked)}
                />
              </IonItem>
              
              <IonItem>
                <IonIcon slot="start" icon={mail} color="primary" />
                <IonLabel>电子邮件通知</IonLabel>
                <IonToggle 
                  slot="end" 
                  checked={emailNotifications} 
                  onIonChange={e => setEmailNotifications(e.detail.checked)}
                />
              </IonItem>
            </IonList>
          </IonCardContent>
        </IonCard>
        
        {/* 主题设置部分 */}
        <IonCard>
          <IonCardHeader>
            <IonCardTitle>主题设置</IonCardTitle>
          </IonCardHeader>
          
          <IonCardContent>
            <IonList lines="full">
              <IonItem>
                <IonIcon 
                  slot="start" 
                  icon={isDarkMode ? sunny : moon} 
                  color="primary" 
                />
                <IonLabel>
                  {isDarkMode ? '深色模式' : '浅色模式'}
                </IonLabel>
                <IonToggle 
                  slot="end" 
                  checked={isDarkMode} 
                  onIonChange={toggleDarkMode}
                />
              </IonItem>
            </IonList>
          </IonCardContent>
        </IonCard>
        
        {/* 账户操作部分 */}
        <IonCard className="danger-zone">
          <IonCardHeader>
            <IonCardTitle>账户操作</IonCardTitle>
          </IonCardHeader>
          
          <IonCardContent>
            <IonGrid>
              <IonRow>
                <IonCol size="12" sizeMd="6">
                  <IonButton 
                    expand="block" 
                    color="medium" 
                    fill="outline"
                    onClick={handleLogout}
                  >
                    <IonIcon slot="start" icon={logOut} />
                    退出登录
                  </IonButton>
                </IonCol>
                
                <IonCol size="12" sizeMd="6">
                  <IonButton 
                    expand="block" 
                    color="danger" 
                    fill="outline"
                    onClick={handleDeleteAccount}
                  >
                    <IonIcon slot="start" icon={trash} />
                    删除账户
                  </IonButton>
                </IonCol>
              </IonRow>
            </IonGrid>
            
            <IonNote className="danger-note">
              注意：删除账户是不可逆的操作，所有数据将被永久删除。
            </IonNote>
          </IonCardContent>
        </IonCard>
        
        {/* 更改密码模态框 */}
        <IonCard id="password-modal" className="password-modal">
          <IonCardHeader>
            <IonCardTitle>更改密码</IonCardTitle>
          </IonCardHeader>
          
          <IonCardContent>
            <IonList lines="full">
              <IonItem>
                <IonLabel position="stacked">当前密码</IonLabel>
                <IonInput 
                  type="password" 
                  value={currentPassword} 
                  onIonChange={e => setCurrentPassword(e.detail.value!)} 
                  placeholder="输入当前密码"
                />
              </IonItem>
              
              <IonItem>
                <IonLabel position="stacked">新密码</IonLabel>
                <IonInput 
                  type="password" 
                  value={newPassword} 
                  onIonChange={e => setNewPassword(e.detail.value!)} 
                  placeholder="输入新密码"
                />
              </IonItem>
              
              <IonItem>
                <IonLabel position="stacked">确认新密码</IonLabel>
                <IonInput 
                  type="password" 
                  value={confirmPassword} 
                  onIonChange={e => setConfirmPassword(e.detail.value!)} 
                  placeholder="再次输入新密码"
                />
              </IonItem>
            </IonList>
            
            <IonGrid>
              <IonRow>
                <IonCol>
                  <IonButton 
                    expand="block" 
                    color="medium" 
                    fill="clear"
                    onClick={() => document.getElementById('password-modal')?.classList.remove('open')}
                  >
                    取消
                  </IonButton>
                </IonCol>
                <IonCol>
                  <IonButton 
                    expand="block" 
                    color="primary"
                    onClick={handleChangePassword}
                  >
                    保存更改
                  </IonButton>
                </IonCol>
              </IonRow>
            </IonGrid>
          </IonCardContent>
        </IonCard>
      </IonContent>
    </IonPage>
  );
};

export default SettingsPage;